<template>
	<view class="wrap">
		<g-header :hideRight="true">
			<template v-slot:title>
				<view class="search">
					<icon type="search" size="16"></icon>
					<input type="text" placeholder="搜索店内商品" placeholder-class="app_phc">
				</view>
			</template>
		</g-header>
		<view class="main">
			<scroll-view class="lMenu" scroll-y="true">
				<view class="lMenu-item" :class="{active: index == lMenuIndex}" v-for="(item, index) in lMenu"
					:key="index" @click="onLMenuTap(index)">
					{{item.typeTitle}}
				</view>
			</scroll-view>
			<scroll-view class="rMenu" scroll-y="true">
				<block>
					<view class="rMenu-header" v-if="lMenu.length> 0">{{lMenu[lMenuIndex].typeTitle}}</view>
					<view class="rMenu-list">
						<view class="rMenu-item" v-for="(item, index) in typeChildren" :key="index"
							@click="onSkipTap('goodsList', item.id)">
							<image :src="item.icon" mode=""></image>
							<text>{{item.typeTitle}}</text>
						</view>
					</view>
				</block>
			</scroll-view>
		</view>
		<view class="tabbar">
			<store-tabbar navindex="3"></store-tabbar>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 'normal', // normal商品管理   selectGoods选择商品
				lMenuIndex: 0,
				lMenu: [],
				typeChildren: []
			}
		},
		onLoad(options) {
			this.type = options.type || 'normal'
			this.updatePage()
		},
		methods: {
			onSkipTap(type, params) {
				const urlObj = {
					goodsList: `/pages/shopInfo/goodsList?productTypeId=${params}`
				}
				this.$g_util.navigationTo(urlObj, type)
			},
			async updatePage() {
				try {
					await this.getTypeList()
					this.getTypeChildren()
				} catch (e) {
					//TODO handle the exception
				}
			},
			getTypeList() {
				return new Promise((resolve, reject) => {
					this.$g_api.productTypeList().then(({
						data
					}) => {
						this.lMenu = data
						resolve(data)
					})
				})

			},
			getTypeChildren() {
				this.$g_api.productTypeChildren({
					parentId: this.lMenu[this.lMenuIndex].id
				}).then(({
					data
				}) => {
					data = this.$g_util.concatRequestUrl(data, 'icon')
					this.typeChildren = data
				})
			},
			onLMenuTap(index) {
				this.lMenuIndex = index
				this.getTypeChildren()
			}
		},
	}
</script>

<style scoped lang="scss">
	.main {
		display: flex;
	}

	.search {
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		width: 630rpx;
		height: 60rpx;
		transform: translateX(24rpx);
		border-radius: 30rpx;
		background-color: #f2f2f2;

		input {
			flex: 1;
			margin-left: 14rpx;
		}
	}

	.lMenu {
		width: 200rpx;
		height: calc(100vh - var(--status-bar-height) - 98rpx);
		box-sizing: border-box;
		padding-bottom: calc(100rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
	}

	.lMenu-item {
		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 26rpx;
		color: #999;

		&.active {
			position: relative;
			font-size: 30rpx;
			font-weight: bold;
			color: #333;
			background-color: #fff;

			&::before {
				position: absolute;
				left: 10rpx;
				top: 50%;
				content: '';
				height: 40rpx;
				width: 4rpx;
				border-radius: 2rpx;
				transform: translateY(-50%);
				background-color: #FF7733;
			}
		}
	}

	.rMenu {
		flex: 1;
		height: calc(100vh - var(--status-bar-height) - 98rpx);
		box-sizing: border-box;
		padding-bottom: calc(100rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
		background-color: #fff;
	}

	.rMenu-header {
		position: relative;
		padding: 30rpx 0;
		padding-left: 30rpx;
		font-size: 24rpx;
		color: #333;
		font-weight: bold;
		z-index: 9;

		&::before {
			position: absolute;
			left: 26rpx;
			bottom: 32rpx;
			content: '';
			width: 40rpx;
			height: 14rpx;
			background-color: #FFCCB2;
			z-index: -1;
		}
	}

	.rMenu-list {
		display: flex;
		flex-wrap: wrap;
		padding-left: 32rpx;
	}

	.rMenu-item {
		display: flex;
		flex-direction: column;
		margin-right: 32rpx;

		image {
			width: 140rpx;
			height: 140rpx;
			border-radius: 10rpx;
			background-color: $g-main-bg;
		}

		text {
			width: 140rpx;
			line-height: 28rpx;
			margin: 10rpx 0 26rpx;
			text-align: center;
			font-size: 24rpx;
			color: #333;
		}
	}

	.btn {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100vw;
		height: 100rpx;
		background-color: #fff;
		box-sizing: content-box;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tabbar {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100vw;
		z-index: 99999;
	}
</style>
